<template>
  <div class="bottom">
    <div class="bottom_top">
      <div class="bottom_top_picture">
        <img src="../assets/imgs/home/contactus.png" alt="" />
      </div>
      <div class="call_me">
        <div class="call_me_log"></div>
        联系我们
      </div>
      <div class="genduo_erwei">
        <div class="genduo_left">
          <p>想要了解更多资讯</p>
          <p>欢迎关注云浩官方微信</p>
        </div>
        <div class="genduo_right">
          <ul>
            <li>
              <img src="../assets/imgs/home/mbmh.png" alt="" />
              <p>记得关注我们美美哦~</p>
            </li>
            <li>
              <img src="../assets/imgs/home/yunhao_ewm.png" alt="" />
              <p>别忘记还有我们浩浩~</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom_second">
      <ul>
        <li>
          <div class="contact-item-top">
            <span class="iconfont gongzuoshijian"></span>
            <p>工作时间</p>
          </div>
          <div class="contact-item-bottom">
            <p>周一至周日</p>
            <p>09:00-21:00</p>
          </div>
        </li>
        <li>
          <div class="contact-item-top">
            <span class="iconfont dianhua"></span>
            <p>联系电话</p>
          </div>
          <div class="contact-item-bottom">
            <p>400-800-3826</p>
          </div>
        </li>
        <li>
          <div class="contact-item-top">
            <span class="iconfont qq"></span>
            <p>企业Q Q</p>
          </div>
          <div class="contact-item-bottom">
            <p>4008003826</p>
          </div>
        </li>
        <li>
          <div class="contact-item-top">
            <span class="iconfont shouhouwuyou"></span>
            <p>售后电话</p>
          </div>
          <div class="contact-item-bottom">
            <p>028-69862368</p>
            <p>028-69862369</p>
          </div>
        </li>
        <li>
          <div class="contact-item-top">
            <span class="iconfont zixun"></span>
            <p>咨询电话</p>
          </div>
          <div class="contact-item-bottom">
            <p>1508280685</p>
            <p>（冉总）</p>
          </div>
        </li>
        <li>
          <div class="contact-item-top">
            <span class="iconfont gongzhonghao"></span>
            <p>售后微信</p>
          </div>
          <div class="contact-item-bottom">
            <p>yh4008003826</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom_thirdly">
      <ul>
        <li class="fisrt_li">
          <div class="row">
            <b>成都总部</b>
            <div class="row_if">
              <p>地址:成都市高新区软件园蜀都中心1栋24楼</p>
              <p>电话:028-87737982 15108280685(冉总)</p>
            </div>
          </div>
          <div class="row1">
            <b>云浩湖南</b>
            <div class="row_if">
              <p>地址:湖南省长沙市芙蓉区韶山北路109号君临天厦君惠楼2008</p>
              <p>电话:028-87737981 18573159031</p>
            </div>
          </div>
        </li>
        <li class="secend_li">
          <div class="ping">
            <b>云浩重庆</b>
            <div class="row_if">
              <p>地址:重庆市江北区观音桥红鼎国际A座22-10</p>
              <p>电话:18083009409</p>
            </div>
          </div>
          <div class="ping1">
            <b>云浩湖北</b>
            <div class="row_if">
              <p>地址:湖北省武汉市江汉区前进一路六渡桥同益大厦C座4楼</p>
              <p>电话:18171057668 18607158341</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom_fourthly">
      <p>
        <span>川公网安备</span>51010602000516号蜀CP备11000144号-1<b>云浩</b>
      </p>
      <p>&copy;2012-2019 cloudvast.com</p>
    </div>
  </div>
</template>

<style scoped>
.bottom {
  background: #4b94ec url("../assets/imgs/home/footer_bg.jpg") center top -2px no-repeat;
  background-size: contain;
  box-sizing: border-box;
  height: 940px;
}
.bottom .bottom_top {
  width: 100%;
  height: 249px;
}
.bottom_top_picture img {
  width: 423px;
  height: 78px;
  margin-top: 50px;
  margin-left: 186px;
}
.call_me {
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: 46px;
  font-weight: 500;
  color: #fff;
  margin-left: 186px;
}
.call_me_log {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  background: #d4a5ff;
  overflow: hidden;
  margin-right: 13px;
}
.genduo_erwei {
  width: 470px;
  height: 213px;
  box-sizing: border-box;
  padding: 34px 28px;
  border-radius: 50px;
  background: url("../assets/imgs/home/footer_erweima.png") no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  top: -166px;
  right: -69%;
}
.genduo_left {
  width: 155px;
  height: 38px;
  font-size: 15px;
  color: #fff;
}
.genduo_left p {
  margin: 0;
  padding: 0;
}
.genduo_right {
  width: 256px;
  height: 153px;
  position: relative;
}
.genduo_right li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  color: #fff;
}
.genduo_right li:nth-child(1) {
  position: absolute;
  top: 11px;
  left: 11px;
}
.genduo_right li:nth-child(2) {
  position: absolute;
  top: 11px;
  right: 0px;
}

.bottom_second {
  width: 1532px;
  height: 226px;
  margin-left: 164px;
  line-height: 30px;
}
.bottom_second {
  margin-top: 48px;
}
ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
li {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
.contact-item-top {
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
}
.contact-item-top p{
  margin-top: 20px;
}
.iconfont {
  font-size: 40px;
}
p {
  margin-top: 15px;
}

.contact-item-bottom {
  margin-top: 37;
  font-size: 16;
  color: #ffffff;
  margin-top: 61px;
}

.bottom_thirdly {
  width: 1530px;
  height: 294px;
  border-bottom: 1px dashed #ffffff;
  border-top: 1px dashed #ffffff;
  margin: auto;
  position: relative;
  top: 0px;
  left: -20px;
}

.bottom_thirdly li,
p,
b {
  margin: 0;
  padding: 0;
  color: #fff;
}
.bottom_thirdly b {
  font-weight: bolder;
  font-size: 19px;
}
.row_if {
  margin-top: 20px;
}
.fisrt_li {
  position: relative;
  top: 0px;
  left: 0px;
}
.secend_li {
  position: relative;
  top: 0px;
  right: 157px;
}
.row {
  width: 400px;
  height: 150px;
  position: absolute;
  top: 45px;
  left: 3px;
  line-height: 31px;
}
.row b {
  position: absolute;
  top: -12%;
  left: -5%;
}
.row1 {
  width: 450px;
  height: 100px;
  position: absolute;
  top: 180px;
  left: 2px;
  line-height: 31px;
}
.row1 b {
  position: absolute;
  top: -12%;
  left: -5%;
}
.ping {
  width: 400px;
  height: 100px;
  position: absolute;
  top: 41px;
  left: -464px;
  line-height: 31px;
}
.ping b {
  position: absolute;
  top: -14%;
  left: -5%;
}
.ping1 {
  width: 410px;
  height: 100px;
  position: absolute;
  top: 174px;
  left: -464px;
  line-height: 31px;
}
.ping1 b {
  position: absolute;
  top: -14%;
  left: -5%;
}
.bottom_fourthly {
  width: 443px;
  height: 49px;
  margin: auto;
  margin-top: 30px;
  font-size: 15px;
}
span {
  margin-right: 15px;
}
b {
  margin-left: 20px;
}
.bottom_fourthly p:nth-child(2) {
  text-align: center;
}
</style>